<template>
    <div class="number-rule-config">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>编号规则配置</span>
                    <el-button type="primary" @click="loadRules">刷新</el-button>
                </div>
            </template>

            <el-table :data="rules" border style="width: 100%">
                <el-table-column prop="businessName" label="业务类型" width="120"></el-table-column>
                <el-table-column prop="prefix" label="前缀" width="100">
                    <template #default="scope">
                        <el-input v-model="scope.row.prefix" placeholder="如：FH" maxlength="10"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="dateFormat" label="日期格式" width="200">
                    <template #default="scope">
                        <el-select v-model="scope.row.dateFormat" placeholder="选择日期格式">
                            <el-option
                                v-for="opt in dateFormatOptions"
                                :key="opt.value"
                                :label="opt.label"
                                :value="opt.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="sequenceLength" label="序号长度" width="120">
                    <template #default="scope">
                        <el-input-number v-model="scope.row.sequenceLength" :min="2" :max="8"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="preview" label="预览示例" width="180">
                    <template #default="scope">
                        <el-button size="small" @click="previewNumber(scope.row)">预览</el-button>
                        <span v-if="scope.row.previewNumber" style="margin-left: 10px;">{{ scope.row.previewNumber }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="enabled" label="启用" width="80">
                    <template #default="scope">
                        <el-switch v-model="scope.row.enabled"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="说明">
                    <template #default="scope">
                        <el-input v-model="scope.row.description" placeholder="规则说明"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="saveRule(scope.row)">保存</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="help-info" style="margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 4px;">
                <h4>编号格式说明：</h4>
                <p><strong>编号 = 前缀 + 日期 + 序号</strong></p>
                <p>示例：<code>FH202510240001</code> = FH（前缀） + 20251024（日期） + 0001（序号）</p>
                <ul>
                    <li><strong>前缀：</strong>业务标识，建议2-4个字符</li>
                    <li><strong>日期格式：</strong>选择合适的日期格式</li>
                    <li><strong>序号长度：</strong>序号补零后的长度（2-8位）</li>
                </ul>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';

const { proxy } = getCurrentInstance();
const rules = ref([]);
const dateFormatOptions = ref([]);

onMounted(async () => {
    await loadRules();
    await loadDateFormatOptions();
});

const loadRules = async () => {
    try {
        const res = await proxy.http.get('/api/numberRule/list');
        if (res && res.status && res.data) {
            rules.value = res.data;
        }
    } catch (error) {
        ElMessage.error('加载规则失败：' + error.message);
    }
};

const loadDateFormatOptions = async () => {
    try {
        const res = await proxy.http.get('/api/numberRule/dateFormatOptions');
        if (res && res.status && res.data) {
            dateFormatOptions.value = res.data;
        }
    } catch (error) {
        console.error('加载日期格式选项失败:', error);
    }
};

const previewNumber = async (rule) => {
    try {
        const res = await proxy.http.post('/api/numberRule/preview', rule);
        if (res && res.status && res.data) {
            rule.previewNumber = res.data;
            ElMessage.success('预览成功');
        }
    } catch (error) {
        ElMessage.error('预览失败：' + error.message);
    }
};

const saveRule = async (rule) => {
    try {
        const res = await proxy.http.post('/api/numberRule/update', rule);
        if (res && res.status) {
            ElMessage.success('保存成功');
            await loadRules();
        } else {
            ElMessage.error(res.message || '保存失败');
        }
    } catch (error) {
        ElMessage.error('保存失败：' + error.message);
    }
};
</script>

<style scoped>
.number-rule-config {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.help-info h4 {
    margin-top: 0;
    color: #409EFF;
}

.help-info ul {
    margin: 10px 0;
    padding-left: 20px;
}

.help-info li {
    margin: 5px 0;
}

code {
    background: #e6f7ff;
    padding: 2px 6px;
    border-radius: 3px;
    color: #1890ff;
}
</style>

